<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: '微软雅黑';
      }
      body {
        display: flex;
        flex-direction: column;
      }
      body .header {
        height: 45px;
        display: flex;
        align-items: center;
        padding-left: 14px;
        background: #409eff;
      }
      body #allmap {
        flex: 1;
      }
      body .info {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f0f0f0;
        border-top: 1px solid #7f7f7f;
      }
    </style>
    <script
      type="text/javascript"
      src="//api.map.baidu.com/api?v=2.0&ak=qZmQ98HVZSODMhT2nUku2o0G6y9fbL8o"
    ></script>
    <title>地点</title>
  </head>
  <body>
    <div class="header">
      <span onclick="goBack()">
        <svg
          t="1591167142393"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1930"
          width="24"
          height="24"
        >
          <path
            d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.70100001-14.563-15.701-38.229 0-52.792L738.418 13.198c15.70100001-14.563 41.187-14.563 56.889 0 15.701 14.564 15.70100001 38.23 0 52.793L314.027 512l481.28 446.009c15.70100001 14.563 15.70100001 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z"
            fill="#ffffff"
            p-id="1931"
          ></path>
        </svg>
      </span>
    </div>
    <div id="allmap"></div>
    <div class="info" id="info"></div>
  </body>
</html>
<script type="text/javascript">
  var addr = window.location.search.substr(location.search.lastIndexOf('=') + 1)
  var info = document.getElementById('info')
  info.append('位置：' + decodeURI(addr))
  // 百度地图API功能
  var map = new BMap.Map('allmap')
  var point = new BMap.Point(116.331398, 39.897445)
  map.centerAndZoom(point, 9)

  map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }))
  map.addControl(new BMap.NavigationControl({
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    type: BMAP_NAVIGATION_CONTROL_SMALL
  }))

  // 创建地址解析器实例
  var myGeo = new BMap.Geocoder()

  myGeo.getPoint(addr, function(point) {
    if (point) {
      map.centerAndZoom(point, 16)
      map.addOverlay(new BMap.Marker(point))
    } else {
      alert('未知错误!')
    }
  })
  
  function goBack() {
    window.history.back()
  }
</script>
